<template>
  <footer>
    <div class="footer_left">
      <div>
        <p>2022美联众合动物医院 版权所有</p>
        <p>技术支持: Ic787</p>
      </div>
    </div>
    <div class="footer_center">
      <div>
        <img src="http://www.meilianzhonghe.com.cn/images/school1_24.png">
        <span>400-020-8888</span>
        <img src="http://www.meilianzhonghe.com.cn/images/school1_27.png" style="margin-left: 40px">
        <span>meilianzhonghe@rp-pet.cn</span>
      </div>
      <div>
        <img src="http://www.meilianzhonghe.com.cn/images/school1_27.png">
        <span>北京市朝阳区景华南街5号远洋·光华国际-C座19层</span>
      </div>
    </div>
    <div></div>
  </footer>
</template>

<script>
export default {
  name: "Footer"
}
</script>

<style scoped>
footer{
  position: relative;
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 138px;
  background-image: url("http://www.meilianzhonghe.com.cn/images/school_42.png");
  background-repeat: no-repeat;
  background-position: 50%;
  color: #868686;
  font-size: 12px;
  margin-top: -60px;
  z-index: 1000;
}
footer>div:first-child{
  flex: 1;
}
footer>div:nth-child(2){
  flex: 1;
  vertical-align: middle;
}
footer>div:last-child{
  flex: 1;
  vertical-align: middle;
}
.footer_left{
  position: relative;
  color: #868686;
  font-size: 12px;
  margin-left: 150px;
}
.footer_left>div{
  position:absolute;
  display: table-cell;
  vertical-align: middle;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}
.footer_center{
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.footer_left p:last-child{
  position: relative;
  margin-top: 5px;
}
.footer_center>div:first-child{
  display: flex;
  align-items: center;
}
.footer_center span{
  margin-left: 15px;
}
.footer_center>div:last-child{
  display: flex;
  align-items: center;
  margin-top: 8px;
}
</style>